<template>
    <div class="el-bkgd-white el-pd-user">
        <div class="set-container el-box-init el-mx-370">
            <div class="set-head">
                <i class="el-icon-edit-outline"></i>
                <div class="title">修改密码</div>
            </div>
            <div class="set-body">
                <el-form
                    v-loading="loading"
                    :model="form"
                    :ref="formRef"
                    :rules="rules"
                    label-position="left"
                    label-width="90px"
                    size="small"
                >
                    <el-form-item label="原密码" prop="password">
                        <el-input
                            type="password"
                            prefix-icon="el-icon-lock"
                            placeholder="请输入原密码"
                            v-model="form.password"
                            clearable
                        />
                    </el-form-item>
                    <el-form-item label="新密码" prop="newpassword">
                        <el-input
                            type="password"
                            prefix-icon="el-icon-lock"
                            placeholder="请输入新密码"
                            v-model="form.newpassword"
                            clearable
                        />
                    </el-form-item>
                    <el-form-item label="确认密码" prop="okpassword">
                        <el-input
                            type="password"
                            prefix-icon="el-icon-lock"
                            placeholder="确认新密码"
                            v-model="form.okpassword"
                            clearable
                        />
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button
                        type="danger"
                        style="width: 100%"
                        @click="onSubmit"
                    >
                        修改密码
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { user as Api } from "../../api";

export default {
    data() {
        return {
            loading: false,
            formRef: "formRef",

            // 表单
            form: {
                password: "", // 原密码
                newpassword: "", // 新密码
                okpassword: "", // 确认密码
            },

            rules: {
                password: [
                    {
                        required: true,
                        message: "请输入原密码",
                        trigger: "blur",
                    },
                ],
                newpassword: [
                    {
                        required: true,
                        message: "请输入新密码",
                        trigger: "blur",
                    },
                    {
                        min: 8,
                        max: 16,
                        message: "长度8~16个字符",
                        trigger: "change",
                    },
                ],
                okpassword: [
                    {
                        required: true,
                        message: "请确认新密码",
                        trigger: "blur",
                    },
                    {
                        min: 8,
                        max: 16,
                        message: "长度8~16个字符",
                        trigger: "change",
                    },
                ],
            },
        };
    },
    methods: {
        async onSubmit() {
            //表单验证
            this.$refs[this.formRef].validate((valid) => {
                if (valid) {
                    this.loading = true;
                }
            });

            if (this.loading) {
                let params = {
                    password: this.form.password,
                    newpassword: this.form.newpassword,
                    okpassword: this.form.okpassword,
                };

                const { code, msg, data } = await this.$axios.$put(
                    Api.updatePassword,
                    params
                );

                if (code == 200) {
                    this.$store.commit("SET_TOKEN", data.token);
                    this.$msg.success(msg);
                    this.$refs[this.formRef].resetFields();
                    this.$router.push({ path: "/" });
                } else {
                    this.$msg.error(msg ? msg : data);
                }

                this.loading = false;
            }
        },
    },
};
</script>